<template>
  <div>
    <!-- 搜索框 -->
    <div class="search-wrapper">
      <input type="text" v-model="city" placeholder="请输入想去的地方，比如：'广州'" />
      <i class="el-icon-search" ></i>
    </div>

    <!-- 推荐 -->
    <div class="search-recommend">
      推荐：
      <span @click="citySelect('广州')" >广州</span>
      <span @click="citySelect('上海')" >上海</span>
      <span @click="citySelect('北京')" >北京</span>
    </div>

    <!-- 推荐攻略 -->
    <div class="recommend">
      <h4>推荐攻略</h4>
      <button type="button">
        <i class="el-icon-edit"></i>
        写游记
      </button>
    </div>
    <!-- 第一种情况 -->
    <div class="post-item" v-for="(item,index) in list" :key="index">
      <div v-if="item.images.length>=3">
        <h4 @click="postDetails(item.id)" >{{item.title}}</h4>
        <!-- 中间内容 -->
        <div class="post-desc" @click="postDetails(item.id)" >
          <p>{{item.summary}}</p>
          <div class="card-images">
            <img :src="item.images[0]" alt />
            <img :src="item.images[1]" alt />
            <img :src="item.images[2]" alt />
          </div>
        </div>
        <!-- 具体信息 -->
        <div class="post-info">
          <div class="post-info-left">
            <span>
              <i class="el-icon-location-outline"></i>
              {{item.cityName}}
            </span>
            <span class="personal">
              by
              <img :src="$axios.defaults.baseURL+item.account.defaultAvatar" alt />
              <div class="yanse">{{item.account.nickname}}</div>
            </span>
            <span>
              <i class="el-icon-view"></i>
              {{item.watch}}
            </span>
          </div>
          <span class="post-info-right">{{item.like}}赞</span>
        </div>
      </div>
      <!-- 第二种 -->
      <div class="post-item post-itemto" v-else>
        <img :src="item.images[0]" alt @click="postDetails(item.id)" style="cursor:pointer"/>

        <div class="post-desc">
          <h4 @click="postDetails(item.id)">{{item.title}}</h4>
          <p @click="postDetails(item.id)">{{item.summary}}</p>
          <div class="post-info">
            <div class="post-info-left">
              <span>
                <i class="el-icon-location-outline"></i>
                {{item.cityName}}
              </span>
              <span class="personal">
                by
                <!-- $axios.defaults.baseURL基准路径 -->
                <img
                  :src="$axios.defaults.baseURL +
              item.account.defaultAvatar"
                  alt
                />
                <div class="yanse">{{item.account.nickname}}</div>
              </span>
              <span>
                <i class="el-icon-view"></i>
                {{item.watch ||0}}
              </span>
            </div>
            <span class="post-info-right">{{item.like || 0}} 赞</span>
          </div>
        </div>
      </div>
    </div>
      <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[3,5,10,15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 应用computed里面的text -->
    <span v-show="false">{{text}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 文章列表
      list: {},
      // 当前页码
      pageIndex: 1,
      // 当前页码的条数
      pageSize: 3,
      // 分页总条目数
      total: 0,
      // 城市
      city: this.$store.state.air.categorylist || ""
      ,
    };
  },
  mounted() {
    
    // this.getPsotIndex(this.pageIndex, this.pageSize);
  },
  computed: {
    text() {
    console.log(this.seekCity);

      // 也要监听左边菜单栏有没有被点击城市
      this.city = this.$store.state.air.categorylist;
              // 在computed这调用一次getPsotIndex就够了
              // 一旦发生变化都会调用一次getPsotIndex
      this.getPsotIndex(this.pageIndex, this.pageSize, this.city);
    },
  },

  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      // this.getPsotIndex(this.pageIndex, this.pageSize);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageIndex = val;
      // this.getPsotIndex(this.pageIndex, this.pageSize);
    },
    // 拿数据的函数
    getPsotIndex(pageIndex, pageSize, city) {
      // 判断是否传city  
      // _start开头渲染的索引
      //  _limit渲染完的最大索引
      const data = city
        ? { _start: (pageIndex - 1) * pageSize, _limit: pageSize, city }
        : {
            _start: (pageIndex - 1) * pageSize,
            _limit: pageSize
          };
          
      this.$axios({
        url: "/posts",
        params: data
      }).then(res => {
        const { total, data } = res.data;
        console.log(res.data);
        
        // 每一条数据
        this.list = data;
        console.log(this.list);
        // 根据城市返回的每一条数据
        this.total = total;
      });
    },
    citySelect(city){
      this.city = city
    },
    postDetails(id){
      console.log(id);
      this.$router.push({
        path:'/post/postDetails',
        query:{
          id
        }
      })
    }
  }
};
</script>

<style lang="less" scpoed>
.search-wrapper {
  border: 3px solid #ffa500;
  display: flex;
  height: 34px;
  align-items: center;
  input {
    box-sizing: border-box;
    width: 660px;
    height: 34px;
    padding: 0 20px;
    background: none;
    outline: none;
    border: none;
  }
  i {
    font-size: 24px;
    font-weight: bold;
    color: #ffa500;
  }
}
.search-recommend {
  font-size: 12px;
  color: #666;
  padding: 10px 0;
  span {
    margin-right: 5px;
    &:hover {
      text-decoration: underline;
      cursor: pointer;
      color: #ffa500;
    }
  }
}
.recommend {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  h4 {
    color: #ffa500;
    line-height: 48px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: normal;
    border-bottom: 2px solid #ffa500;
  }
  button {
    margin-bottom: 7px;
    display: inline-block;
    width: 105px;
    font-size: 14px;
    height: 40px;
    color: #fff;
    background: #409eff;
    border: 1px solid #409eff;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    &:hover {
      background: #66b1ff;
    }
  }
}
.post-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  h4 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 15px;
    cursor: pointer;
    // 一下几条是超出的文本隐藏
    width: 470px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &:hover {
      color: #ffa500;
    }
  }
  .post-desc {
    font-size: 14px;
    color: #666;
    cursor: pointer;
    // display: flex;
    // flex-direction: column;
    p {
      height: 60px;
      overflow: hidden;
    }
    .card-images {
      height: 150px;
      display: flex;
      margin: 15px 0;
      justify-content: space-between;
      img {
        width: 220px;
      }
    }
  }
}
.post-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0;
  .post-info-left {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
    span {
      margin-right: 10px;
      .yanse {
        display: inline-block;
        color: #ffa500;
      }
      img {
        vertical-align: middle;
        border-radius: 50%;
        width: 16px;
        height: 16px;
      }
    }
  }
  .post-info-right {
    font-size: 16px;
    color: #ffa500;
  }
}
.post-itemto {
  display: flex;
  & > img {
    width: 220px;
    height: 150px;
    margin-right: 10px;
  }
  .post-desc {
    p {
      width: 463px;
    }
  }
}
.personal {
  cursor: pointer;
}
</style>